<template>
  <div class="index-container">
    <el-row :gutter="20">
      <el-col :lg="24" :md="12" :sm="24" :xl="24" :xs="24">
        <el-calendar v-model="calendarDate">
          <template slot="dateCell" slot-scope="{ data }">
            <div class="content">
              <div :class="['date', device === 'mobile' && 'column']">
                <span class="day">{{ device === 'desktop' ? data.day.split('-').slice(-1)[0] :
                  data.day.split('-').slice(-1)[0] }}</span>
                <div v-if="device === 'desktop' ? btn(data).length > 3 : btn(data).length > 0">
                  <el-popover placement="top-start" :title="`${data.day}`" trigger="hover">
                    <div v-for="(item, index) in btn(data)" :key="index" class="item popover">
                      <div v-if="item.type == 'feed'" class="feed">{{ item.batchCode }}：需喂养</div>
                      <div v-if="item.type == 'vaccine'" class="vaccine">{{ item.batchCode }}：需疫苗</div>
                    </div>
                    <span slot="reference">
                      <vab-colorful-icon
                        :icon-class="`https://gcore.jsdelivr.net/gh/chuzhixin/zx-colorful-icon@master/leave.svg`" />
                    </span>
                  </el-popover>
                </div>
              </div>
              <div v-if="device === 'desktop'" class="list">
                <div v-for="(item, index) in btn(data).slice(0, 3)" :key="index" class="item">
                  <div v-if="item.type == 'feed'" class="feed">{{ item.batchCode }}：需喂养</div>
                  <div v-if="item.type == 'vaccine'" class="vaccine">{{ item.batchCode }}：需疫苗</div>
                </div>
              </div>
            </div>
          </template>
        </el-calendar>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  API_dashBoardFeedRecord,
  API_dashBoardVaccineRecord,
} from "@/api/dashBoard";
import dayjs from "dayjs";
export default {
  name: "Index",
  data() {
    return {
      calendarDate: new Date(),
      list: [],
    };
  },
  computed: {
    ...mapGetters({
      device: 'settings/device',
    }),
  },
  watch: {
    calendarDate(val, oldVal) {
      if (
        val &&
        dayjs(val).format("YYYY-MM-DD") == dayjs().format("YYYY-MM-DD")
      ) {
        this.fetchData({
          startAt: dayjs().startOf("month").unix(),
          endAt: dayjs().endOf("month").unix(),
        });
      } else if (
        val &&
        dayjs(val).toDate() < dayjs(oldVal).startOf("month").toDate()
      ) {
        this.fetchData({
          startAt: dayjs().subtract(1, "month").startOf("month").unix(),
          endAt: dayjs().subtract(1, "month").endOf("month").unix(),
        });
      } else if (
        val &&
        dayjs(val).toDate() > dayjs(oldVal).endOf("month").toDate()
      ) {
        this.fetchData({
          startAt: dayjs().add(1, "month").startOf("month").unix(),
          endAt: dayjs().add(1, "month").endOf("month").unix(),
        });
      }
    },
  },
  beforeDestroy() { },
  created() {
    this.fetchData({
      startAt: dayjs().startOf("month").unix(),
      endAt: dayjs().endOf("month").unix(),
    });
  },
  mounted() {
    // 修改今日为当月
    var spanDoc = document.querySelector(
      ".el-calendar__button-group .el-button-group>button:nth-child(2) span"
    );
    spanDoc.innerText = "本月";
  },
  methods: {
    btn(data) {
      return this.list.filter((item) => item.day === data.day);
    },
    async fetchData(data) {
      let res = await Promise.all([API_dashBoardFeedRecord(data), API_dashBoardVaccineRecord(data)])
      let tempFeedData = res[0].data.map(item => {
        return {
          day: dayjs(item.changeTime * 1000).format('YYYY-MM-DD'),
          type: 'feed',
          batchCode: item.batchCode
        }
      })
      let tempVaccineData = res[1].data.map(item => {
        return {
          day: dayjs(item.injectionTime * 1000).format('YYYY-MM-DD'),
          type: 'vaccine',
          batchCode: item.batchCode
        }
      })
      const mergedArray = tempFeedData.concat(tempVaccineData);
      this.list = mergedArray
      console.log(this.list)
    },
  },
};
</script>
<style lang="scss" scoped>
.index-container {
  padding: 0 !important;
  margin: 0 !important;
  background: #f5f7f8 !important;
}


.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .date {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    margin-bottom: 3px;
    text-align: center;

    &.column {
      flex-direction: column;
    }

    .day {
      font-size: 12px;
    }
  }
}


.list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}


.feed {
  color: #5fa924;
  font-size: 12px;
}

.vaccine {
  color: #fc5531;
  font-size: 12px;
}

.popover.item {
  text-align: left;

  .vaccine,
  .feed {
    font-size: 14px;
  }
}
</style>
